不定更新、可能爛尾XD

學習資源: W3Schools、其他網路資料

SVG : 多邊形

(僅列出部分有使用到的屬性)

• <svg></svg>

  • height : 整個圖形(畫布)的原始長度
  • width: 整個圖形(畫布)的原始寬度

• <polygon></polygon> 或 <polygon />

  • points : 構成多邊形的點座標(x1,y1 x2,y2 ...)
  • sroke : 圖形外框顏色
  • stroke-width : 圖形外框寬度
  • fill : 圖形填滿顏色
  • fill-opacity : 調整圖形填滿顏色的透明度
  • stroke-opacity : 調整圖形外框顏色的透明度
  • fill-rule : 指定圖形需要被填滿的區域

範例1

<svg height="210" width="500">
    <polygon points="200,200 400,200 300,50" fill="rgb(255, 183, 197)" 
    stroke="black" stroke-width="2" />
</svg>

範例2

<svg height="210" width="500">
    <polygon points="100,10 40,198 190,78 10,78 160,198" fill="rgb(255, 183, 197)" 
    stroke="black" stroke-width="2" fill-rule="nonzero" />
</svg>

範例3

<svg height="210" width="500">
    <polygon points="100,10 40,198 190,78 10,78 160,198" fill="rgb(255, 183, 197)" 
    stroke="black" stroke-width="2" fill-rule="evenodd" />
</svg>

fill-rule

當構成多邊形的點所形成的路徑有所重疊，就需要特別指定要填滿的區域，並將圖形拆分成內外區域，圖形內填滿、圖形外則不填滿，而fill-rule這個屬性就是用來指定如何區分圖形內、外區域，可使用的屬性值共有2個，分別是nonzero和evenodd。

上面的範例2、3正是使用不同的圖形內、外區域判斷方法，所以造成截然不同的結果。

• nonzero
  起始值為0，在區域內任取一點並畫出一條無限長的射線(如下圖)，若路徑方向和射線方向形成的是順時針方向则+1，反之逆時針方向则-1，最後如果數值是0，則判斷該區域為圖形外部(不填充)；如果不是0，則判斷為圖形内部(填充)。

  下圖區域內藍點所發出的射線與路徑2、5相交，並且射線與路徑所形成的方向均為順時針，所以數值總和為2(非0)，也因此藍點所在區域被歸類在圖形內部，會被填入顏色。
  

• evenodd
  起始值為0，在區域內任取一點並畫出一條無限長的射線(如下圖)，射線每和一條路徑相交，就將數值+1，最後根據數值作出不同判斷，若數值為奇數，則判斷區域位於圖形内部(填充)；若數值為偶数，則判斷區域位於圖形外部(不填充)。

  下圖區域內藍點所發出的射線恰經過2條路徑(數值總和為2，偶數)，故藍點所在區域被歸類在圖形外部，不會被填入顏色。
  

備註 : 圖形外部指的是不被包含在完整圖形的區域(不須被填充上色)。

SVG : 折線

折線與之前畫過的線段有些許不同 :

1. 折線可由複數點連線而成，但線段(Line)只有起始點和終點。
2. 折線有fill相關屬性，但線段沒有。

(僅列出部分有使用到的屬性)

• <svg></svg>

  • height : 整個圖形(畫布)的原始長度
  • width: 整個圖形(畫布)的原始寬度

• <polyline></polyline> 或 <polyline />

  • points : 構成折線的點座標(x1,y1 x2,y2 ...)
  • sroke : 折線顏色
  • stroke-width : 折線寬度
  • fill : 圖形填滿顏色
  • fill-opacity : 調整圖形填滿顏色的透明度
  • stroke-opacity : 調整折線顏色的透明度

範例1

<svg height="210" width="500">
    <polyline points="80,10 120,10 120,40 150,40 150,80 200,80" 
    stroke="black" stroke-width="3" fill="white" stroke-opacity="0.5" />
</svg>

範例2

<svg height="210" width="500">
    <polyline points="80,10 120,10 120,40 150,40 150,80 200,80" 
    stroke="black" stroke-width="3" fill="yellow"
    fill-opacity="0.5" stroke-opacity="0.5" />
</svg>

備註 : 折線的顏色填充範圍(圖形)為折線本身加上起始點、終點連線所構成的區域。

參考資料

搞懂SVG/Canvas中nonzero和evenodd填充规则